<template>
    <view>
        <view class="list">
            <view class="item" v-for="item, index in bookShelf" :key="index" @click="goDetail(item)">
                <view class="img">
                    <image class="topImg" v-if="item.status == 0"
                        src="http://182.61.31.180:5000/images/1655568937181_true.png"></image>
                    <image :src="item.coverImage"></image>
                </view>
                <view class="price">￥{{ item.curprice }}</view>
                <view class="title">{{ item.bookTitle }}</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'bookShelf',
    props: ['bookShelf'],
    methods: {
        goDetail(book) {
            this.$store.dispatch('getBookDetail', book.id).then(res => {
                if (res == 'success') {
                    this.$Router.push({
                        name: 'detail',
                    })
                } else {
                    this.$tools.toast('请求失败，请稍后再试')
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.list {
    width: 23rem;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;

    .item {
        padding:0.3rem;
        float: left;
        margin: 0.5rem;
        background: white;
        border-radius: 0.5rem;
        width: 6rem;
        height: 9rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;

        .price {
            margin-left: 0.2rem;
            font-size: 0.8rem;
            color: $uni-color-theme-6;
            font-weight: bold;
        }

        .title {
            margin-left: 0.2rem;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            -o-text-overflow: ellipsis;
            font-size: 0.8rem;
            font-weight: bold;
        }

        .img {
            margin: 0.5rem;
            position: relative;
            width: 5rem;
            height: 7rem;

            image {
                width: 100%;
                height: 100%;
            }

            .topImg {
                position: absolute;
                z-index: 1;
                background: rgba(255, 255, 255, 0.6);
            }
        }

    }
}
</style>